<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>我要进货</title>
	<link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
	<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
	<link rel="stylesheet" href="/wjfh/css/iconfont.css">
	<link rel="stylesheet" type="text/css" href="/wjfh/css/common.css"/>
	<link rel="stylesheet" type="text/css" href="/wjfh/layui/css/layui.css"/>
	<link rel="stylesheet" type="text/css" href="/wjfh/css/style.css"/>
	<script src="/wjfh/js/flexible.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="jinhuo" class="layui-form" v-cloak style="display: none;">
	<form id="jinhuoForm" action="">

		<div class="resgcontain">
			<h1 class="site-h1">我的上级</h1>
			<!-- <div class="logobox"><img src="img/logo.png" ></div> -->
			<div class="item">
				<div class="layui-form-item">
					<i class="layui-icon" style="color: #5FB878;vertical-align: bottom;">&#xe643;</i>
					<span class="layui-badge layui-bg-orange" style="background-color: inherit!important;color: #666!important;">{{usermess.parentName}}</span>
					<span class="layui-badge layui-bg-orange" style="">{{usermess.parentDeptName}}</span>
				</div>
			</div>
		</div>
		<div class="cotpad">
			<fieldset class="layui-elem-field layui-field-title site-title">
				<legend><a name="compatibility">产品信息</a></legend>
			</fieldset>
		</div>
		<div class="resgcontain">
			<div class="item" v-if="goodsnums ==0">
				<select name="dengji" lay-filter="selectDj">
					<option value="5">请选择要升级的等级</option>
					<option :value="deptLis.deptId" v-if="deptLis.deptId != 1 && deptLis.deptId <5" v-for="deptLis in deptListoption">{{deptLis.name}}({{deptLis.deptId | filtersnum}}件)</option>

				</select>
				<p class="nimpp fs12"><span class="icon iconfont"></span>请先选择您要晋升的等级然后填入对应的数量！</p>
			</div>
			<div class="item" v-for="(goodsdata,index) in goodsdatas">
				<div class="layui-form-item goodss">
					<div class="layui-form-mid layui-word-aux">{{goodsdata.goodsName}}</div>
					<div class="layui-input-block">
						<div  name="goodsPrice">
							<div class="layui-form-mid layui-word-aux">￥<span>{{goodsdata.goodsPrice.split(',')[usermess.deptId-2]}}</span></div>
							<!--<div class="layui-form-mid layui-word-aux" v-if="1==1">￥<span>{{goodsdata.goodsPrice.split(',')[dengji]}}</span></div>-->
							<input style="width: 50px;text-align: center;padding: 0px;float: right;" type="number" name="title" :id="goodsdata.id" placeholder="数量" @blur="numiptblur();" maxlength="6" v-model="goodsdata.other" class="layui-input goodss">
						</div>
					</div>
				</div>
			</div>
			<div class="layui-form-item" style="margin-bottom: 0px;">
				<div class="layui-form-mid layui-word-aux">订单金额：
					<span style="font-size: 0.4rem;color: #ff5500;">{{zj || 0}}</span>元
				</div>
			</div>
		</div>
		<div class="cotpad">
			<fieldset class="layui-elem-field layui-field-title site-title">
				<legend><a name="compatibility">收货信息</a></legend>
			</fieldset>
		</div>
		<div class="resgcontain">
			<div class="item">
				<input type="text" name="title"  placeholder="收件人" value="" class="layui-input goodss" v-model="usermess.userName">
			</div>
			<div class="item">
				<input type="phone" name="title"  placeholder="收件手机号码" value="" class="layui-input goodss" v-model="usermess.mobile">
			</div>
			<div class="item">
				<textarea class="publicIptSty widthman" placeholder="">{{sheng.split('_')[0]}}&nbsp;{{shi.split('_')[0]}}&nbsp;{{qu}}&nbsp;{{address}}</textarea>
			</div>
			<div class="item">
				<button type="button" class="layui-btn layui-btn-danger" id="test7"><i class="layui-icon"></i>{{updatebtnname}}</button>
				<div class="layui-inline layui-word-aux">
					这里上传您转账截图或聊天记录
				</div>
				<div class="pevimg" style="display: none;"><img id="pevimg" src="" alt=""></div>
			</div>
		</div>

		<div class="shangpd">
			<button class="layui-btn layui-btn-fluid resgSubmit" type="button" @click="shopFun();">确认购买</button>
		</div>
	</form>
</div>

<script src="/wjfh/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="/wjfh/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/wjfh/js/axios.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.min.js?v=2.1.4" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script type="text/javascript">
    var idata = new  Vue({
        el:"#jinhuo",
        data:{
            goodsdatas:'',
            img:'',
            sheng:'',
            shi:'',
            qu:'',
			yiseldengji:false,
            dengji:3,
            address:'',
            updatebtnname:'上传截图',
            usermess:'',
            goodsPrice: 0,
            isNone:0,   //订单数量
			dengjinum:0,
            zongshu:0,   //商品总数
            zj:0,      //商品总价
			goodsnums:0,
            deptListoption:'',   //等级信息
            goodss:{}   // 订单信息
        },
        filters:{
            filtersnum:function (num) {
				switch (num){
					case 2:
					    return '120';
					    break;
                    case 3:
                        return '36';
                        break;
                    case 4:
                        return '12';
                        break;
				}
            }
		},
        methods:{
            shopFun:function(){

                idata.peronblur();

                if (idata.usermess.deptId == 2) {
                    idata.dengjinum = 120;
				}else  if (idata.usermess.deptId == 3) {
                    idata.dengjinum = 36;
                }else  if (idata.usermess.deptId == 4) {
                    idata.dengjinum = 12;
                }else  if (idata.usermess.deptId == 5) {
                    idata.dengjinum = 0;
                }
                console.log('等级数量'+idata.dengjinum);

                console.log('zongshu数量'+idata.zongshu);
				 //判断是不是第一次下单
				var isnofirst;
				if(idata.goodsnums ==0){
                    isnofirst = '0';
                    if(idata.dengjinum != 0){
                        if(idata.zongshu != idata.dengjinum){
                            layer.msg('商品数与等级要求不匹配！总数应为('+idata.dengjinum+')件', {icon: 5,time: 2500});
                            return;
                        }
                    }else{
                        layer.msg('请先选择等级!', {icon: 5,time: 1200});
                        return;
                    }
				}else{
                    isnofirst = '1';
                    if(idata.zongshu == 0){
                        var errlayer = layer.confirm('一件都不买你好意思提交吗？', {
                            skin: 'layui-layer-molv', //样式类名
                            title:'温馨提示',
                            btn: ['打扰了'] //按钮
                        }, function(){
                            layer.close(errlayer);
                            //parent.location.href = '/goodsManager/page/index';
                        });
                        return;
                    }
				}
                var shouhuo = idata.usermess.userName+', ' +idata.usermess.mobile+' ,' + idata.sheng.split('_')[0] +', ' +idata.shi.split('_')[0] +', '+idata.qu +' '+idata.address;

                var jsonStr = {
                    "address": shouhuo,
                    "imgUrl": idata.img,
                    "goods":idata.goodss,
					'amount':idata.zj,
					"type":isnofirst
                };
                console.log(jsonStr);
                var param = {"jsonStr":JSON.stringify(jsonStr)}
                console.log(jsonStr);
                $.ajax({
                    cache: true,
                    data: param,
                    type: "POST",
                    url: "/goodsManager/gmOrder/saveOrder",
                    error : function(request) {
                        layer.alert("Connection error");
                    },
                    success : function(data) {

                        if(data.code == 500){
                            layer.alert(data.msg);
                        }else{
                            console.log(data);
                            layer.msg('下单成功!', {icon: 6,time: 1200},function () {
                                parent.location.href = '/goodsManager/page/wddd';
                            });

                        }

                    }
                });
            },
            peronblur:function () {
                idata.zongshu = 0;
                idata.zj = 0;
                for(goodsdata in idata.goodsdatas){
                    var ids = idata.goodsdatas[goodsdata].id;
                    var vals = document.getElementById(idata.goodsdatas[goodsdata].id).value;
                    var key = [ids];
                    idata.goodss[key] = vals;
                    idata.isNone += vals;
                    //goodss.ids = vals;
                    idata.goodsPrice += idata.goodsdatas[goodsdata].goodsPrice.split(',')[idata.usermess.deptId-2]*vals;
					idata.zj += Number(idata.goodsdatas[goodsdata].other)*idata.goodsdatas[goodsdata].goodsPrice.split(',')[idata.usermess.deptId-2];

                    idata.zongshu = Number(idata.goodsdatas[goodsdata].other) + idata.zongshu;
                }
                console.log(idata.zj);
            },
            numiptblur:function () {
                idata.zj = 0;
                for(goodsdata in idata.goodsdatas){
                    idata.zj += Number(idata.goodsdatas[goodsdata].other)*idata.goodsdatas[goodsdata].goodsPrice.split(',')[idata.usermess.deptId-2];
                }
            }
        },
        mounted:function () {

            layui.use(['jquery', 'form','layer','upload'], function() {
                $ = layui.jquery,
                    form = layui.form,
                    upload = layui.upload,
                    layer = layui.layer;
                layer.ready(function(){
                    layer.load(1);
                });
                $.ajax({      //获取全部等级信息列表
                    cache: true,
                    type: "POST",
                    url: "/goodsManager/page/deptList",
                    error : function(request) {
                        layer.alert("Connection error");
                    },
                    success : function(data) {
                        console.log(data);
                        idata.deptListoption = data;
                        layer.closeAll('loading');
                    }
                });
                form.on('select(selectDj)', function(data){
                    idata.usermess.deptId = data.value;
                    idata.zj = 0;
                    console.log($(this).context.innerHTML);
                    for(goodsdata in idata.goodsdatas){
                        idata.goodsdatas[goodsdata].other = null;
                    }
					var tishiwenzi =$(this).context.innerHTML;
                    if (data.value == 2){
                        //tishiwenzi = idata.deptListoption[1]+'(120件)';
                        idata.dengjinum = 120;
                        //idata.yiseldengji = true;
                        //console.log(idata.yiseldengji);
                    }else if (data.value == 3){
                        //tishiwenzi = '总经销商(36件)';
                        idata.dengjinum = 36;
                        //idata.yiseldengji = true;
                    }else if (data.value == 4){
                        //tishiwenzi = '经销商(12件)';
                        idata.dengjinum = 12;
                        //idata.yiseldengji = true;
                    }
                    if (data.value != 5){
                        var errlayer = layer.confirm('您当前选择的是【'+tishiwenzi+'】，商品总数必须对等，否则会导致您升级失败！', {
                            skin: 'layui-layer-molv', //样式类名
                            title:'温馨提示',
                            btn: ['知道啦'] //按钮
                        }, function(){
                            layer.close(errlayer);
                            idata.yiseldengji = false;
                            idata.dengjinum = 0;
                            //parent.location.href = '/goodsManager/page/index';
                        });
					}else{
                        var errlayer = layer.confirm('请选择你要升级的等级，好吗？', {
                            skin: 'layui-layer-molv', //样式类名
                            title:'温馨提示',
                            btn: ['好哒'] //按钮
                        }, function(){
                            layer.close(errlayer);
                            //parent.location.href = '/goodsManager/page/index';
                        });
					}
                });
                var uploadInst = upload.render({
                    elem: '#test7' //绑定元素
                    ,url: '/common/sysFile/upload' //上传接口
                    ,done: function(res){
                        //上传完毕回调
                        console.log(res);
                        $('.pevimg').show();
                        idata.img = res.fileName;

                    }
                    ,before: function(obj){
                        //预读本地文件示例，不支持ie8
                        obj.preview(function(index, file, result){
                            $('#pevimg').attr('src', result); //图片链接（base64）
                            idata.updatebtnname = '重新上传';
                        });
                    }
                    ,error: function(){
                        //请求异常回调
                    }
                });
                $.ajax({      //获取订单数量,判断是不是第一次下单
                    cache: true,
                    type: "POST",
                    url: "/goodsManager/gmOrder/getMyOrder",
                    error : function(request) {
                        layer.alert("Connection error");
                    },
                    success : function(data) {
                        console.log(data);
                        for (idx in data){
                            idata.goodsnums++;
						}
						$("#jinhuo").show();
                        layer.closeAll('loading');
                    }
                });

                $.ajax({    //获取商品信息
                    cache: true,
                    type: "GET",
                    url: "/goodsManager/gmGoodsInfo/getList",
                    error : function(request) {
                        layer.alert("Connection error");
                    },
                    success : function(data) {
                        console.log(data);
                        if(data.code == 500){
                            parent.location.href = '/goodsManager/page/login';
                        }else{
                            idata.goodsdatas = data;
                            layer.closeAll('loading');
                            layui.use(['form','element'], function() {
                                var form = layui.form,element = layui.element;
                                element.init();
                                form.render();
                            });
                        }
                    }
                });
                $.ajax({
                    cache: true,
                    type: "GET",
                    url: "/goodsManager/retail/address",
                    error : function(request) {
                        layer.alert("Connection error");
                    },
                    success : function(data) {
                        console.log(data);
                        if(data.code == 500){
                            parent.location.href = '/goodsManager/page/login';
                        }else{
                            idata.sheng = data.province;
                            idata.shi = data.city;
                            idata.qu = data.district;
                            idata.address = data.liveAddress;
                            idata.usermess = data;
                            layui.use(['form','element'], function() {
                                var form = layui.form,element = layui.element;
                                element.init();
                                form.render();
                            });
                        }
                    }
                });
//                    form.on('checkbox(lay-goods)', function (data) {
//                        console.log(data.elem);
//                        if (data.elem.checked) {
//                            $(data.elem.id).next('.layui-input-block').find('input').removeAttr('disabled').removeClass('iptdisabled');
//                        } else {
//                            $(data.elem.id).next('.layui-input-block').find('input').attr('disabled').addClass('iptdisabled');
//                        }
//                    })

            })
        }
    })

    function showAmount() {
        var amount = 0;
        var goodsPriceList = $("div[name='goodsPrice']")
        $(goodsPriceList).each(function (index,value) {
            var price = $(value).find("span").eq(0).html();
            var num = $(value).find("input").eq(0).val()==null?0:$(value).find("input").eq(0).val();
            amount += price*num;

        })
        $("#showAmountSpan").html(amount);

    }
</script>
</body>
</html>
